<template>
  <div class="border">
    <h1>A 结点 --color: {{ color }}</h1>
    <button @click="() => changeColor()">改变color</button>
    <ChildrenB />
    <br />
    <hr />
    <br />
    <ChildrenC />
    <br />
    <hr />
    <br />
    <ChildrenD />
  </div>
</template>
<script>
import ChildrenB from './child_b.vue'
import ChildrenC from '../childs_C'
import ChildrenD from '../childs_D'
export default {
  name: 'indexVue',
  components: {
    ChildrenB,
    ChildrenC,
    ChildrenD
  },
  provide() {
    return {
      // 我们这里提供的是一个字符串 不是一个响应式的 不像index1.vue 可以使用下面的注释代码 直接把当前组件的实例传过去 (能达到效果但是很多属性都是无用的)
      theme: {
        color: this.color
      }
    }
  },
  // provide() {
  //   return {
  //     theme: this
  //   }
  // },
  data() {
    return {
      color: 'blue'
    }
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color
      } else {
        this.color = this.color === 'blue' ? 'red' : 'blue'
      }
    }
  }
}
</script>
